import { reactive, inject, provide, toRaw } from 'vue'
import { ConsoleLogger } from '@/utils/debug-log'
import { RecordManage } from '@/core/mediaRecorder/recorder'
import { ERecorderStatus, RecordTime } from '@/core/mediaRecorder/index'
import { format } from '@/utils/date'

const console = new ConsoleLogger('视频录制Hooks')

const useRecorderSymbol = Symbol('useRecorderstore')

export interface IRecordRecorderStoreFn {
  (): IRecordRecorderStore
  __CurrentStore?: IRecordRecorderStore
}

export interface IRecorderHooksState {
  activeManage: RecordManage | null
  /**列表还是画板 */
  mediaStatus: boolean
  /**倒计时 */
  mediaCountDownStatus: boolean
  startConstDownTime: string
}

export interface IRecordRecorderStore {
  state: IRecorderHooksState
  initManage: (c: HTMLCanvasElement) => void
  getStatus: () => ERecorderStatus | undefined
  /**倒计时 */
  startConstDownTime: (time: number) => void
}

/**
 *  * useRecorderProvide .
 * @function
 * @returns store extend useRecorderProvide
 */
export const useRecorderProvide: () => IRecordRecorderStore = () => {
  console.log('开始进入RecorderProvide 初始化')
  //判断学生id

  const state = reactive<IRecorderHooksState>({
    activeManage: null,
    mediaStatus: false,
    mediaCountDownStatus: false,
    startConstDownTime: '00:00',
  }) as IRecorderHooksState
  const initManage = (c: HTMLCanvasElement) => {
    state.activeManage = new RecordManage(c)
  }

  const getStatus = () => {
    return state.activeManage?.status
  }

  const startConstDownTime = (time: number) => {
    state.startConstDownTime = '00:0' + time.toString()
    setTimeout(() => {
      if (time < 1) {
        return
      }
      state.startConstDownTime = '00:0' + time.toString()
      startConstDownTime(time - 1)
    }, 1000)
  }

  const store: IRecordRecorderStore = {
    state,
    getStatus,
    startConstDownTime,
    initManage,
  }

  provide(useRecorderSymbol, store)

  return store
}

/**
 *  * useRecorderStore 用户hooks.
 * @function
 * @returns store extend IRecordRecorderStore
 */
export const useRecorderStore: IRecordRecorderStoreFn = () => {
  const store: IRecordRecorderStore = inject(useRecorderSymbol) as IRecordRecorderStore
  return store
}
